<template>
  <div class="category-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="createCategory()">添加</el-button>
      </div>
      <el-table v-loading="loading" :data="categoryList" border style="width: 100%">
        <el-table-column type="index" label="编号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="90" align="center">
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="创建时间"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <create-or-update-category
      :isEdit="isEditCategory"
      :show="dialogVisible"
      :category="category"
      @changeDialog="changeDialog(false, true)"
    ></create-or-update-category>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getResourceCategory, deleteCategory } from '@/apis/resource'
import CreateOrUpdateCategory from './create-or-update-category.vue'
export default Vue.extend({
  name: 'resource-category-list',
  components: {
    CreateOrUpdateCategory
  },
  data() {
    return {
      categoryList: [],
      dialogVisible: false,
      // 是否是编辑分类
      isEditCategory: false,
      // 传入编辑页面的category
      category: {},
      loading: false
    }
  },
  created() {
    this.loadCategory()
  },
  methods: {
    async loadCategory() {
      this.loading = true
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.categoryList = data.data.map((item: any) => ({
          name: item.name,
          id: item.id,
          sort: item.sort,
          createdTime: item.createdTime
        }))
      }
      this.loading = false
    },
    createCategory() {
      this.isEditCategory = false
      this.category = {}
      this.changeDialog(true)
    },
    handleEdit(row: any) {
      this.isEditCategory = true
      this.category = {
        id: row.id,
        name: row.name,
        sort: row.sort
      }
      this.changeDialog(true)
    },
    handleDelete(row: any) {
      console.log(row)
      this.$confirm('是否要删除该分类？', '删除分类', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          const { data } = await deleteCategory(row.id)
          if (data.code === '000000') {
            this.$message.success('删除分类成功')
            this.loadCategory()
          }
        })
        .catch(() => {
          this.$message.info('取消删除分类')
        })
    },
    changeDialog(state: boolean, reload = false) {
      this.dialogVisible = state
      if (reload) this.loadCategory()
    }
  }
})
</script>
<style lang="scss" scoped>
</style>
